<template>
    <v-app>
        <v-tabs v-model="tab" @contextmenu.prevent="$refs.menu.open()">
            <v-tab v-for="(item, index) in items" :key="index">
                <div @contextmenu.prevent="openContextMenu(index)">
                        <span @click="toggle" :class="{ 'tab-active': active }">
                            {{ item.name }}
                        </span>
                    </div>
            </v-tab>
        </v-tabs>

        <v-menu ref="menu" :close-on-click="false">
            <v-list>
                <v-list-item @click="closeTab">
                    <v-list-item-title>关闭选项卡</v-list-item-title>
                </v-list-item>
                <v-list-item @click="closeOthers">
                    <v-list-item-title>关闭其他选项卡</v-list-item-title>
                </v-list-item>
                <v-list-item @click="closeAll">
                    <v-list-item-title>关闭所有选项卡</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
    </v-app>
</template>
  
<script>
export default {
    props: ['active', 'toggle'],
    data() {
        return {
            tab: null,
            items: [
                { name: 'Tab 1' },
                { name: 'Tab 2' },
                { name: 'Tab 3' }
            ]
        };
    },
    methods: {
        openContextMenu(index) {
            this.tab = index;
            this.$refs.menu.isActive = true;
        },
        closeTab() {
            const index = this.tab;
            this.items.splice(index, 1);
            this.tab = null;
        },
        closeOthers() {
            const index = this.tab;
            this.items = [this.items[index]];
        },
        closeAll() {
            this.items = [];
            this.tab = null;
        }
    }
};
</script>
  
<style scoped>
.tab-active {
    font-weight: bold;
}
</style>
  